import { useLayoutEffect, useState } from "react";

/**
 * 1. 同步执行
 * 2. 浏览器完成布局和绘制之前执行副作用
 * 3. 阻塞dom渲染
 * 4. 参数和useEffect一样效果
 *
 * @returns useLayoutEffect 返回 undefined，和useEffect一样
 */

export function UseLayoutEffectDemo() {
  const [count, setCount] = useState<number>(0);

  useLayoutEffect(() => {
    console.log("useLayoutEffect");
    for (let i = 0; i < 100; i++) {
      setCount((count: number) => count + 1);
    }
  }, []);
  return (
    <div>
      <h3>useLayoutEffect学习</h3>
      <p>{count}</p>
    </div>
  );
}
